<template>
  <div v-if="tip" class="flex flex-col justify-center">
    <n-tooltip :placement="placement" trigger="hover">
      <template #trigger>
        <span class="inline-flex items-center" :class="text?'space-x-1':''">
          <n-icon v-if="icon" :size="iconSize">
            <icon :icon="icon"></icon>
          </n-icon>
          <span>
        <span :style="`font-size: ${textSize}px`">{{ text }}</span>
        <span v-if="!text"><slot></slot></span>
      </span>
        </span>
      </template>
      {{tip}}
    </n-tooltip>
  </div>
  <div v-else class="flex flex-col justify-center">
    <span class="inline-flex items-center" :class="text?'space-x-1':''">
      <n-icon v-if="icon" :size="iconSize">
        <icon :icon="icon"></icon>
      </n-icon>
      <span>
        <span :style="`font-size: ${textSize}px`">{{ text }}</span>
        <span v-if="!text"><slot></slot></span>
      </span>
    </span>
  </div>


</template>

<script setup lang="ts">

import {Icon} from "@iconify/vue";

 defineProps({
  tip: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  iconSize: {
    type: Number,
    default: 16
  },
  text: {
    type: String,
    default: ''
  },
  textSize: {
    type: Number,
    default: 16
  },
  placement:{ //'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' |
    type: String,
    default: 'top'
  }
})

</script>

<style scoped>

</style>